@use '../core' as *;

@mixin stack-table() {
    thead {
        display: none;
    }

    tr,
    td {
        display: block;
        text-align: left;
    }

    tr {
        padding: $spacing-size-4 0;

        &:nth-child(even) {
            background-color: unset;
        }
    }

    td {
        padding: 0;
        line-height: var(--text-lh-tight);
        font-weight: var(--text-bold);

        &:not(:last-child) {
            margin-bottom: $spacing-size-2;
        }
    }

    td[data-column]::before {
        content: attr(data-column) ': ';
        font-weight: var(--text-regular);
        color: var(--color-fg-secondary);
    }
}

table#{$selector-exclude-grid} {
    width: 100%;
    margin-bottom: $spacing-size-4;
    border-collapse: collapse;
    border-bottom: 1px solid var(--color-border-primary);
}

tbody#{$selector-exclude-grid} {
    vertical-align: top;
}

tr#{$selector-exclude-grid} {
    border-top: 1px solid var(--color-border-primary);
}

th#{$selector-exclude-grid},
td#{$selector-exclude-grid} {
    padding: $spacing-size-2 $spacing-size-4;
    text-align: left;
}

table.small-header th {
    font-weight: var(--text-regular);
    padding-top: $spacing-size-1;
    padding-bottom: $spacing-size-1;
}

table.stack {
    @include stack-table();
}

thead > tr {
    border-top: none;
    color: var(--color-fg-primary);
}
